<template>
  <div>
    <Panel :title="title">
      <div class slot="ext">
        <slot name="button" />
      </div>
      <div slot="body">
        <el-form
          size="medium"
          label-width="80px"
          :model="temporaryData"
          ref="formdoalog"
          :rules="formdialog"
          :validate-on-rule-change="false"
        >
          <el-row>
            <el-col :span="item.width || 12" v-for="item of editColumn" :key="item.prop">
              <el-form-item :label="item.name" :prop="item.prop">
                <template v-if="item.type==='text'">
                  <el-input :placeholder="'请输入'+item.name" v-model="temporaryData[item.prop]"></el-input>
                </template>
                <template v-else-if="item.type==='number'">
                  <el-input
                    type="number"
                    :placeholder="'请输入'+item.name"
                    v-model="temporaryData[item.prop]"
                  ></el-input>
                </template>
                <template v-else-if="item.type==='time'">
                  <el-date-picker
                    v-model="temporaryData[item.prop]"
                    type="date"
                    value-format="timestamp"
                    :placeholder="'请输入'+item.name"
                  ></el-date-picker>
                </template>
                <template v-else-if="item.type==='inputNumber'">
                  <el-input-number
                    v-model="temporaryData[item.prop]"
                    @change="value => $attrs[item.prop]?$attrs[item.prop](value):{}"
                    :min="1"
                  ></el-input-number>
                </template>
                <template v-else-if="item.type==='textarea'">
                  <el-input
                    v-model="temporaryData[item.prop]"
                    :placeholder="'请输入'+item.name"
                    type="textarea"
                  ></el-input>
                </template>

                <template v-else-if="item.type === 'password'">
                  <el-input type="password" v-model="temporaryData[item.prop]" placeholder="请输入密码"></el-input>
                </template>

                <template v-else-if="item.type==='select'">
                  <el-select
                    v-model="temporaryData[item.prop]"
                    @change="value => $attrs[item.prop] ? $attrs[item.prop](value) : {}"
                    :placeholder="'请输入'+item.name"
                  >
                    <el-option
                      v-for="(optionItem,index) of item.optionList"
                      :key="optionItem.id || index"
                      :label="item.optionBindLabel ? optionItem[item.optionBindLabel] : optionItem.name"
                      :value="item.optionBindValue ? optionItem[item.optionBindValue] : optionItem.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModalPanel from "@/components/ModalPanel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import { arrayToObject } from "@/tools";
export default {
  components: {
    Panel,
    TableEncapsulation,
    ModalPanel,
    TablePager
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    getDataUrl: {
        type: String,
        default: ""
    },
    queryData: {
        type: Object,
        default: {}
    }
  },
  data() {
    return {
        temporaryData: {}
    };
  },
  computed: {
    formdialog() {
      let arr = this.editColumn
        .filter(item => item.required)
        .map(item => ({
          [item.prop]: {
            required: true,
            message: item.name + "不能为空",
            trigger: "blur"
          }
        }));
      return arrayToObject(arr, "prop");
    }
  },
  methods: {

  },
  mounted() {},
  async created() {
      // if(this.getDataUrl){
      //     this.temporaryData = await this.dispatch({type: 'base/getDetailsData',url: this.getDataUrl,queryData: this.queryData})
      //   console.log(this.temporaryData)
      // }
  }
};
</script>
<style lang='scss' module>
.basePageModal {
  :global {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .el-input-number--medium {
      width: 220px;
    }
  }
}
</style>

